<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">创建</button>
    <button class="get">获取</button>
</body>
<script>

    // 如何获取cookie?
    // 1. cookie的存取都依赖于document.cookie
    // 2. cookie是以键值对形成存在的(字符串) => 存的时候是一条一条存储的(设置),取的时候一次性取出所有的cookie,以"; "分隔(获取)


    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];

    set.onclick = function () {
        var date = new Date();
        date.setDate(date.getDate() + 7);

        document.cookie = "user=a123123;expires=" + date.toUTCString() + "; path=/";
        document.cookie = "pwd=123123;expires=" + date.toUTCString() + "; path=/";
        document.cookie = "phone=17386141517;expires=" + date.toUTCString() + "; path=/";
        document.cookie = "email=1272071495@qq.com;expires=" + date.toUTCString() + "; path=/";
    }


    get.onclick = function () {
        console.log(1, document.cookie);

        var cookie = document.cookie;
        var data = {};
        if (cookie) {
            var list = cookie.split("; ");
            console.log(list);
            for (var i = 0; i < list.length; i++) {
                var item = list[i]; // 'user=a123123', 'pwd=123123'
                var key = item.split("=")[0];
                var val = item.split("=")[1];
                data[key] = val;
            }
        }
        console.log(data);
    }


    // setCookie(key, val, expires, path = "/")
    // getCookie(key)


</script>

</html>